// pages/grow_log/grow_log.js
//获取应用实例
const app = getApp()
const util = require('../../utils/util.js')
import * as echarts from '../../ec-canvas/echarts';


Page({

  /**
   * 页面的初始数据
   */
  data: {
    fat_boy:[
      {
        'class':'一年级',
        'level_1':'13.5-18.1',
        'level_2':'≤13.4',
        'level_3':'18.2-20.3',
        'level_4':'≥20.4',
      },{
        'class':'二年级',
        'level_1':'13.7-18.4',
        'level_2':'≤13.6',
        'level_3':'18.5-20.4',
        'level_4':'≥20.5',
      },{
        'class':'三年级',
        'level_1':'13.9-19.4',
        'level_2':'≤13.8',
        'level_3':'19.5-22.1',
        'level_4':'≥22.2',
      },{
        'class':'四年级',
        'level_1':'14.2-20.1',
        'level_2':'≤14.1',
        'level_3':'20.2-22.6',
        'level_4':'≥22.7',
      },{
        'class':'五年级',
        'level_1':'14.4-21.4',
        'level_2':'≤14.3',
        'level_3':'21.5-24.1',
        'level_4':'≥24.2',
      },{
        'class':'六年级',
        'level_1':'14.7-21.8',
        'level_2':'≤14.6',
        'level_3':'21.9-24.5',
        'level_4':'≥24.6',
      },{
        'class':'初一',
        'level_1':'15.5-22.1',
        'level_2':'≤15.4',
        'level_3':'22.2-24.9',
        'level_4':'≥25.0',
      },{
        'class':'初二',
        'level_1':'15.7-22.5',
        'level_2':'≤15.6',
        'level_3':'22.6-25.2',
        'level_4':'≥25.3',
      },{
        'class':'初三',
        'level_1':'15.8-22.8',
        'level_2':'≤15.7',
        'level_3':'22.9-26.0',
        'level_4':'≥26.1',
      },{
        'class':'高一',
        'level_1':'16.5-23.2',
        'level_2':'≤16.4',
        'level_3':'23.3-26.3',
        'level_4':'≥26.4',
      },{
        'class':'高二',
        'level_1':'16.8-23.7',
        'level_2':'≤16.7',
        'level_3':'23.8-26.5',
        'level_4':'≥26.6',
      },{
        'class':'高三',
        'level_1':'17.3-23.8',
        'level_2':'≤17.2',
        'level_3':'23.9-27.3',
        'level_4':'≥27.4',
      },{
        'class':'大学',
        'level_1':'17.9-23.9',
        'level_2':'≤17.8',
        'level_3':'24.0-27.9',
        'level_4':'≥28.0',
      },
    ],
    fat_girl:[
      {
        'class':'一年级',
        'level_1':'13.3-17.3',
        'level_2':'≤13.2',
        'level_3':'17.2-19.2',
        'level_4':'≥19.3',
      },{
        'class':'二年级',
        'level_1':'13.5-17.8',
        'level_2':'≤13.4',
        'level_3':'17.9-20.2',
        'level_4':'≥20.3',
      },{
        'class':'三年级',
        'level_1':'13.6-18.6',
        'level_2':'≤13.5',
        'level_3':'18.7-21.1',
        'level_4':'≥21.2',
      },{
        'class':'四年级',
        'level_1':'13.7-19.4',
        'level_2':'≤13.6',
        'level_3':'19.5-22.0',
        'level_4':'≥22.1',
      },{
        'class':'五年级',
        'level_1':'13.8-20.5',
        'level_2':'≤13.7',
        'level_3':'20.6-22.9',
        'level_4':'≥23.0',
      },{
        'class':'六年级',
        'level_1':'14.2-20.8',
        'level_2':'≤14.1',
        'level_3':'20.9-23.6',
        'level_4':'≥23.7',
      },{
        'class':'初一',
        'level_1':'14.8-21.7',
        'level_2':'≤14.7',
        'level_3':'21.8-24.4',
        'level_4':'≥24.5',
      },{
        'class':'初二',
        'level_1':'15.3-22.2',
        'level_2':'≤15.2',
        'level_3':'22.3-24.8',
        'level_4':'≥24.9',
      },{
        'class':'初三',
        'level_1':'16.0-22.6',
        'level_2':'≤15.9',
        'level_3':'22.7-25.1',
        'level_4':'≥25.2',
      },{
        'class':'高一',
        'level_1':'16.5-22.7',
        'level_2':'≤16.4',
        'level_3':'22.8-25.2',
        'level_4':'≥25.3',
      },{
        'class':'高二',
        'level_1':'16.9-23.2',
        'level_2':'≤16.8',
        'level_3':'23.3-25.4',
        'level_4':'≥25.5',
      },{
        'class':'高三',
        'level_1':'17.1-23.3',
        'level_2':'≤17.0',
        'level_3':'23.4-25.7',
        'level_4':'≥25.8',
      },{
        'class':'大学',
        'level_1':'17.2-23.9',
        'level_2':'≤17.1',
        'level_3':'24.0-27.9',
        'level_4':'≥28.0',
      },
    ],
    host:app.globalData.host,
  },



  detail:function(id){
      var that = this;
      util.request('baby_grow_log/report', {grow_log_id:id,baby_id:app.globalData.parent.baby_default_id}, function (data) {
        console.log(data.data.baby)
        if(data.code == 1){
            that.setData({
              child:data.data.baby,
              report:data.data.report,
              log:data.data.log,
              article:data.data.article,
            });

            //第一个柱状图
            that.barComponent.init((canvas, width, height, dpr) => {
              // 获取组件的 canvas、width、height 后的回调函数
              // 在这里初始化图表
              const chart_1 = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr // new
              });
              chart_1.setOption(that.getBarOption());
            })

            //第一个柱状图
            that.barComponent2.init((canvas, width, height, dpr) => {
              // 获取组件的 canvas、width、height 后的回调函数
              // 在这里初始化图表
              const chart_2 = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr // new
              });
              chart_2.setOption(that.getBarOption2());
            })


        }else{
          util.fail(data.msg,that);
        }
      // });
    });
  },

  height:function(){
    var that = this;
    util.request('baby_grow_log/height', {baby_id:app.globalData.parent.baby_default_id}, function (data) {
      console.log(data.data)

      if(data.code == 1){
          that.setData({
            canvas_data:data.data,
          });

          //折线图
          that.lineComponent.init((canvas, width, height, dpr) => {
          // 获取组件的 canvas、width、height 后的回调函数
          // 在这里初始化图表
          const chart_3 = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // new
          });
          chart_3.setOption(that.lineOption());
        })

      }else{
        util.fail(data.msg,that);
      }
    });
  },


  onLoad:function(e){
    this.barComponent = this.selectComponent('#mychart-dom-multi-scatter');
    this.barComponent2 = this.selectComponent('#mychart-dom-multi-scatter-2');
    this.lineComponent = this.selectComponent('#mychart-dom-line');
    this.detail(e.id);
    this.height();
  },

   lineOption:function(chart) {
    var that = this;
    return {
      color: ["#37A2DA", "#67E0E3", "#9FE6B8",'#e53c6c'],
      tooltip: {
        show: false,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        name: "年龄(岁)",
        nameLocation: "middle",
        nameTextStyle: {
          lineHeight: 40,
        },
        splitLine: {
          show: true
        },
        axisTick: {
          show: false
        },
        minorTick: {
          splitNumber: 10
        },
        axisLabel:{
          align: "right",
          interval(index,value){
            console.log(index,value);
            if(value.indexOf(".") == -1){
              return true;
            }
          }
        },

        data: that.data.canvas_data.x,
      },
      yAxis: {
        type: 'value',
        name: "身高（cm）",
      },
      series: [{
        name: '3%',
        type: 'line',
        smooth: true,
        symbol: "none",
        data: that.data.canvas_data.y_3,
      }, {
        name: '50%',
        type: 'line',
        symbol: "none",
        smooth: true,
        data: that.data.canvas_data.y_50,
      }, {
        name: '97%',
        type: 'line',
        symbol: "none",
        smooth: true,
        data:that.data.canvas_data.y_97,
      }, {
        name: 'baby',
        type: 'line',
        symbol: "none",
        smooth: true,
        data:that.data.canvas_data.baby_log,
      }]
    };
  },


   /**
    * 第一个柱形图
    */
   getBarOption:function() {
    return {
      xAxis: [
        {
          type: 'category',
          data: ['同龄平均身高', '当前身高'],
          axisTick: {
            show: false
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          max:210,
          interval:30,
          name:'身高(cm)'
        }
      ],
      series: [
        {
          data: [this.data.report.avg_height, this.data.log.height],
          type: 'bar',
          barWidth : 25,//柱图宽度
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'top', //在上方显示
              },

  　　　　　　 //这里是重点
              color: function(params) {
                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#0396ff', '#fecf03', '#67e0e3'];
                  return colorList[params.dataIndex]
              }
            }
        }
        }]
    };
  },


     /**
    * 第2个柱形图
    */
   getBarOption2:function() {
    return {
      xAxis: [
        {
          type: 'category',
          data: ['平均值','预测值', '期望值','遗传值'],
          axisTick: {
            show: false
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          max:210,
          interval:30,
          name:'身高(cm)'
        }
      ],
      series: [
        {
          data: [this.data.report.avg_height_18,this.data.report.forecast, this.data.child.hope_height,this.data.child.inherit_height_val],
          type: 'bar',
          barWidth : 25,//柱图宽度
    //       markLine: {
    //         lineStyle: {
    //           normal: {
    //             type: 'dotted',
    //             color:'red',
    //           },
    //           label:{
    //             show:true,
    //             position:'middle',
    //             formatter:"平均值线 : "+this.data.report.avg_height_18,
    //           }
    //         },
    //         large:true,
    //         effect:{
    //           show: false,
    // loop: true,
    // period: 0,
    // scaleSize : 2,
    // color : null,
    // shadowColor : null,
    // shadowBlur : null
    //       },
    //         data: [
    //           {
    //             name: '平均值线',
    //             value:190,
    //             yAxis: 190 // 数值类型，对应y轴坐标
    //           }
    //         ]
    //       },
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'top', //在上方显示
              },

  　　　　　　 //这里是重点
              color: function(params) {
                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#0396ff', '#fecf03', '#67e0e3','#f37b1d'];
                  return colorList[params.dataIndex]
              }
            }
        }
        }]
    };
  }

})


